<template>
    <div>
        <h2 ref="titleRef">HOME PAGE</h2>
    </div>
</template>

<script>
import {ref, watchEffect, onMounted} from "vue"

export default {
    name: "Home",
    setup() {
        let titleRef = ref(null);

        //调整watchEffect的执行时机
        //通过使用watchEffect的第二个参数来调整回调函数第一次执行的时机
        //{flush: "pre"|"post"|"sync"}
        //pre 默认参数 它会在元素挂载或者更新 前 去执行Effect回调函数
        //post 它会在元素挂载或者更新 后 去执行Effect回调函数
        //sync 强制效果始终同步触发 ==> 然而 这是低效的, 应该减少使用

        //默认执行一次回调函数, 收集依赖
        watchEffect(()=>{
            console.log(titleRef.value);//null ==> h2
        },{
            flush: "post"
        })

        return {
            titleRef
        }
    },
}
</script>

<style scoped>

</style>